import React, { useState, useCallback, useEffect } from 'react';
import { getSysUserSelected } from '../../../../../../Api/listUrl'
import { postSofPdPlanActDistribution } from "../../../../api";
import { Modal, Form, DatePicker, message, Select } from 'antd';
import moment from 'moment'

const { Option } = Select;

/**
 * @description: 待办任务-分配任务-弹窗
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-29）
 */

const DistributionModule = ({
    distributionModuleShow,
    setDistributionModuleShow,
    handleDistributionModuleFun,
    clickId,
    clickTaskId,
    distribution
}) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields } = form
    const [userList, setUserList] = useState([])
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected()
                if (code === '20000') {
                    setUserList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        userFun()
    }, [userFun])
    const handleOk = () => {
        validateFields().then(values => {
            values.antEndDate = moment(values.antEndDate).format("YYYY-MM-DD")
            values.pdplanId = clickId
            values.taskId = clickTaskId
                ; (async () => {
                    const { code, msg } = await postSofPdPlanActDistribution(values)
                    if (code === '20000') {
                        message.success('分配成功!')
                        handleDistributionModuleFun()
                        resetFields()
                        setDistributionModuleShow(false)
                    } else {
                        message.error(msg)
                    }
                })()
        })
        // ;
    };

    const handleCancel = () => {
        resetFields()
        setDistributionModuleShow(false);
    };
    return <Modal title={distribution ? "分配任务" : "拾取任务"} visible={distributionModuleShow} onOk={handleOk} onCancel={handleCancel}>
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            {
                distribution ? <Form.Item
                    label="执行人员"
                    name="assignId"
                    rules={[{ required: true, message: '请选择执行人!' }]}
                >
                    <Select style={{ width: 120 }} >
                        {
                            userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                        }
                    </Select>
                </Form.Item> : null
            }

            <Form.Item
                label="预计完成时间"
                name="antEndDate"
                rules={[{ required: true, message: '请选择预计完成时间!' }]}
            >
                <DatePicker />
            </Form.Item>


        </Form>
    </Modal>
}

export default DistributionModule